<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <input type="button" value="获取数据" id="j_btnGetData" />
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="j_tbData">

        </tbody>
    </table>
</body>

</html>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        var data = [
            {
                name: '灰猫',
                url: 'http://www.huimao.com',
                type: 'It教育'
            }, {
                name: '灰猫',
                url: 'http://www.huimao.com',
                type: 'It教育'
            },
            {
                name: '灰猫',
                url: 'http://www.huimao.com',
                type: 'It教育'
            },

        ]
        $('#j_btnGetData').click(function () {
            // html()
            // 点击获取数据通过html（）来获取
            //     var list = [];
            //     for (var i = 0; i < data.length; i++) {
            //         list.push('<tr>')
            //         for(var key in data[i]){
            //             list.push('<td>')
            //             list.push(data[i][key])
            //             list.push('</td>')
            //         }
            //         list.push('</tr>')
            //     }
            //    console.log(list.join(''))
            //    $('#j_tbData').html(list.join(''))
            // $()
            for (var i = 0; i < data.length; i++) {
                var $tr = $("<tr><td>" + data[i]['name'] + "</td><td>" + data[i]['url'] + "</td><td>" + data[i]['type'] + "</td></tr>");
                console.log($tr);
                $('#j_tbData').append($tr)
            }
        })


    });
</script>